.card p:nth-of-type(2n+1) {
  margin            : 0;
  margin-block-start: 0;
  margin-block-end  : 0;
  font-size         : 14px;
}

.card p:nth-of-type(2n) {
  margin            : 0;
  margin-block-start: 0;
  margin-block-end  : 0.5em;
}

.card p:nth-last-of-type(1) {
  text-align: right;
}

.ball,
.ball2 {
  width           : 15px;
  height          : 15px;
  border-radius   : 50%;
  background-color: deeppink;
  position        : absolute;
  animation       : ball-pingpong 1s step-start infinite;
  top             : 0;
  left            : 30%;
}

.ball2 {
  left            : 60%;
  background-color: transparent;
  border          : 1px dashed deeppink;
  animation       : ball2-appear 1s ease 2s both;
}

@keyframes ball2-appear {
  from {
    left   : 30%;
    opacity: 0;
  }

  50% {
    left   : 30%;
    opacity: 1;
  }
}

.ball2:nth-of-type(1) {
  top: 2.5%
}

.ball2:nth-of-type(2) {
  top: 5%
}

.ball2:nth-of-type(3) {
  top: 7.5%
}

.ball2:nth-of-type(4) {
  top: 11%
}

.ball2:nth-of-type(5) {
  top: 17.5%
}

.ball2:nth-of-type(6) {
  top: 28%
}

.ball2:nth-of-type(7) {
  top: 43%
}

.ball2:nth-of-type(8) {
  top: 63%
}

.ball2:nth-of-type(9) {
  top: 93%
}

.ball2:nth-of-type(10) {
  top: 95%
}

@keyframes ball-pingpong {

  4%,
  100% {
    top: 2.5%;
  }

  8%,
  88% {
    top: 5%;
  }

  12%,
  84% {
    top: 7.5%;
  }

  16%,
  80% {
    top: 11%;
  }

  20%,
  76% {
    top: 17.5%;
  }

  24%,
  72% {
    top: 28%
  }

  28%,
  68% {
    top: 43%;
  }

  32%,
  64% {
    top: 63%;
  }

  40%,
  56% {
    top: 93%
  }

  48% {
    top: 95%;
  }
}